<template>
  <div>
    <ZgDialog
      :width="view.width"
      :top="view.top"
      :title="view.title"
      :showFooter="view.showFooter"
      v-model="visible"
    >
      <div v-if="initLoading">
        正在初始化配置数据...
      </div>
      <div v-else>
        <div v-if="!hasInit">
          初始化配置数据失败
        </div>
        <div :style="{padding:`${layout.视图边距}px`}">
          <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-item label="环节名称">
              <a-input v-model="formState.name"/>
            </a-form-item>
            <a-form-item label="环节编号">
              <a-input v-model="formState.code"/>

            </a-form-item>
            <a-form-item label="环节单据" class="flexRow">
              <a-input v-model="formState.linkReceipt"/>
              <a-select style="width: 120px" class="mr10">
                <a-select-option value="不限">不限</a-select-option>
              </a-select>
              <a-select style="width: 120px" class="mr10">
                <a-select-option value="不限">不限</a-select-option>
              </a-select>
              <a-select style="width: 120px" class="mr10">
                <a-select-option value="不限">不限</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="主流程单据">
              <div class="receipt pd10 pos-rlt" v-if="true">
                <a-checkbox-group v-model="formState.processReceipt">
                  <a-row>
                    <a-col :span="14">
                      <a-checkbox value="1">山西焦煤集团发票开具通知单</a-checkbox>
                    </a-col>
                    <a-col :span="14">
                      <a-checkbox value="2">文件测试表单</a-checkbox>
                    </a-col>
                    <a-col :span="14">
                      <a-checkbox value="3">发票明细表</a-checkbox>
                    </a-col>

                  </a-row>
                </a-checkbox-group>
                <div class="pos-abs t10 r10">
                  <ZgButton class="mr10" type="" icon="" ref="resizeBtn">恢复</ZgButton>
                  <ZgButton icon="" type="" ref="allCheckBtn">全选</ZgButton>
                </div>
              </div>
              <div v-else class="receipt wfull w400 flx-c">
                <ZgEmpty></ZgEmpty>
              </div>
            </a-form-item>
            <a-form-item label="个性化单据">
              <div class="receipt pd10 pos-rlt" v-if="false">
                <a-checkbox-group v-model="formState.personalizationReceipt">
                  <a-row>
                    <a-col :span="14">
                      <a-checkbox value="1">山西焦煤集团发票开具通知单</a-checkbox>
                    </a-col>
                    <a-col :span="14">
                      <a-checkbox value="2">文件测试表单</a-checkbox>
                    </a-col>
                    <a-col :span="14">
                      <a-checkbox value="3">发票明细表</a-checkbox>
                    </a-col>

                  </a-row>
                </a-checkbox-group>
                <div class="pos-abs t10 r10">
                  <ZgButton class="mr10" type="" icon="" ref="resizeBtn">恢复</ZgButton>
                  <ZgButton icon="" type="" ref="allCheckBtn">全选</ZgButton>
                </div>
              </div>
              <div v-else class="receipt wfull  h400 flx-c">
                <ZgEmpty></ZgEmpty>
              </div>
            </a-form-item>
            <a-form-item label="前置流程单据">
              <div class="receipt pd10 pos-rlt" v-if="false">
                <a-checkbox-group v-model="formState.frontReceipt">
                  <a-row>
                    <a-col :span="14">
                      <a-checkbox value="1">山西焦煤集团发票开具通知单</a-checkbox>
                    </a-col>
                    <a-col :span="14">
                      <a-checkbox value="2">文件测试表单</a-checkbox>
                    </a-col>
                    <a-col :span="14">
                      <a-checkbox value="3">发票明细表</a-checkbox>
                    </a-col>

                  </a-row>
                </a-checkbox-group>
                <div class="pos-abs t10 r10">
                  <ZgButton class="mr10" type="" icon="" ref="resizeBtn">恢复</ZgButton>
                  <ZgButton icon="" type="" ref="allCheckBtn">全选</ZgButton>
                </div>
              </div>
              <div v-else class="receipt wfull  h400 flx-c">
                <ZgEmpty></ZgEmpty>
              </div>
            </a-form-item>

          </a-form>
        </div>
      </div>
    </ZgDialog>
  </div>
</template>
<script>
import ZgButton from '@/comp/ZgButton.vue'

export default {
  components: {
    ZgButton
  },
  data () {
    return {
      visible: false,
      hasInit: true,
      initLoading: false,
      view: {
        width: '1100px',
        top: '5%',
        title: '测试流程（铁路）',
        showFooter: true
      },
      layout: {
        视图边距: 0
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
      formState: {
        name: '',
        code: '',
        linkReceipt: '',
        processReceipt: '',
        personalizationReceipt: '',
        frontReceipt: ''
      }

    }
  },
  methods: {
    open () {
      this.visible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.receipt{
  border:1px solid #d9d9d9;
}
</style>
